import React, { useEffect, useState } from 'react'
import { Layout, Menu } from 'antd'
import axios from 'axios'
import { withRouter } from 'react-router-dom' // 高阶组件
// import {
//   UserOutlined,
// } from '@ant-design/icons';
import '../../components/sandbox/index.css'
import SubMenu from 'antd/es/menu/SubMenu';
const { Sider } = Layout;

function SideMenu(props) {
  const [menu, setMenu] = useState([])
  useEffect(() => {
    axios.get("http://localhost:5000/userInfo").then(res => {
      setMenu(res.data)
    })
  }, [])


  const checkPagePermission = (item) => {
    return item.pagepermisson === 1
  }


  const renderMenu = (menu) => {
    return menu.map(item => {
      if (item.children?.length > 0 && checkPagePermission(item)) {
        return <SubMenu key={item.key} icon={item.icon} title={item.title}>
          {renderMenu(item.children)}
        </SubMenu>
      }
      return checkPagePermission(item) && <Menu.Item key={item.key} icon={item.icon} onClick={() => {
        props.history.push(item.key)
      }}>{item.title}</Menu.Item>
    })
  }

  const selectKeys = [props.location.pathname]
  const openKeys = ["/" + props.location.pathname.split('/')[1]]
  return (
    <Sider trigger={null} collapsible collapsed={false}>
      <div className="logo">打工人摸鱼系统</div>
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={selectKeys}
        defaultOpenKeys={openKeys}
      >
        {
          renderMenu(menu)
        }
      </Menu>
    </Sider>
  )
}
export default withRouter(SideMenu)
